WebView 与混合应用测试

// Android（Java/Kotlin）：在 Application.onCreate 或 WebView 初始化前调用
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);  // 全局开启 WebView 调试
}

// iOS（Swift）：iOS 16.4+ 需显式设置 isInspectable
webView.isInspectable = true

# 1. 确认设备已连接
adb devices
 
# 2. 查看设备上可调试的 WebView 进程（Android 7+ 需先开调试开关）
adb shell cat /proc/net/unix | grep webview_devtools
# 输出示例：@webview_devtools_remote_12345
 
# 3. 端口转发：将设备的本地 socket 映射到 PC 端口
adb forward tcp:9222 localabstract:webview_devtools_remote_12345
 
# 4. 在桌面 Chrome 访问 chrome://inspect#devices
#    或直接访问 http://localhost:9222/json 查看 WebView 中打开的页面
curl http://localhost:9222/json

# Python：Appium 3.x + Selenium Manager 自动管理（推荐）
from appium import webdriver
from appium.options.android import UiAutomator2Options
 
options = UiAutomator2Options()
options.platform_name = "Android"
options.automation_name = "UiAutomator2"
options.device_name = "Pixel 8 API 35"
options.app_package = "com.example.app"
options.app_activity = ".MainActivity"
options.set_capability("appium:noReset", True)
 
# 方式一：依赖 Selenium Manager 自动下载匹配的 ChromeDriver（2026 推荐）
# 无需任何 chromedriver 配置，Appium 启动时自动探测 WebView 版本并下载
 
# 方式二：显式指定 ChromeDriver 路径（适用于内嵌非标准内核如 TBS / X5）
options.set_capability(
    "appium:chromedriverExecutable",
    "/path/to/chromedriver-149"
)
 
# 方式三：指定 ChromeDriver 目录，Appium 自动匹配版本
options.set_capability(
    "appium:chromedriverExecutableDir",
    "/path/to/chromedrivers"
)
 
driver = webdriver.Remote("http://127.0.0.1:4723", options)

options.set_capability("appium:autoWebview", True)
options.set_capability("appium:autoWebviewTimeout", 5000)  # 切换超时 5s

# Python：典型 Hybrid App 测试用例
from appium import webdriver
from appium.options.android import UiAutomator2Options
from appium.webdriver.common.appiumby import AppiumBy
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
 
options = UiAutomator2Options()
options.platform_name = "Android"
options.automation_name = "UiAutomator2"
options.device_name = "Pixel 8 API 35"
options.app_package = "com.xueqiu.android"
options.app_activity = ".view.WelcomeActivityAlias"
options.set_capability("appium:noReset", True)
options.set_capability("appium:chromedriverExecutableDir", "/usr/local/share/chromedrivers")
 
driver = webdriver.Remote("http://127.0.0.1:4723", options)
wait = WebDriverWait(driver, 15)
 
# 1. 原生层：点击"交易"Tab
wait.until(EC.presence_of_element_located(
    (AppiumBy.XPATH, "//*[@text='交易']")
)).click()
 
# 2. 等待 WebView 出现并切入
wait.until(lambda d: len(d.contexts) > 1, "WebView 未出现")
print("可用 Context:", driver.contexts)
# 输出: ['NATIVE_APP', 'WEBVIEW_com.xueqiu.android']
 
# 3. 切换到最后一个 WEBVIEW Context（通常 -1 即目标 WebView）
driver.switch_to.context(driver.contexts[-1])
 
# 4. Web 层：使用 CSS 定位"A股开户"
wait.until(EC.presence_of_element_located(
    (By.CSS_SELECTOR, ".trade-account-open")
)).click()
 
# 5. 新窗口切换（WebView 中 target=_blank 会开新 window）
wait.until(lambda d: len(d.window_handles) > 1)
driver.switch_to.window(driver.window_handles[-1])
 
# 6. Web 层：填表单
wait.until(EC.presence_of_element_located(
    (By.CSS_SELECTOR, "input[name='phone']")
)).send_keys("13800138000")
driver.find_element(By.CSS_SELECTOR, "input[name='code']").send_keys("123456")
driver.find_element(By.CSS_SELECTOR, ".btn-submit").click()
 
# 7. 切回原生层继续操作
driver.switch_to.context("NATIVE_APP")
driver.find_element(AppiumBy.ID, "com.xueqiu.android:id/back_btn").click()
 
driver.quit()

// Java：Context 切换核心 API
import io.appium.java_client.AppiumBy;
import io.appium.java_client.android.AndroidDriver;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.ui.WebDriverWait;
import java.time.Duration;
import java.util.Set;
 
// 列出所有 Context
Set<String> contexts = driver.getContextHandles();
System.out.println("可用 Context: " + contexts);
 
// 切换到 WEBVIEW
String webviewContext = contexts.stream()
    .filter(c -> c.startsWith("WEBVIEW"))
    .findFirst()
    .orElseThrow(() -> new RuntimeException("未找到 WebView"));
driver.context(webviewContext);
 
// Web 层 CSS 定位
WebElement openAccountBtn = new WebDriverWait(driver, Duration.ofSeconds(10))
    .until(d -> d.findElement(By.cssSelector(".trade-account-open")));
openAccountBtn.click();
 
// 切回原生
driver.context("NATIVE_APP");

# Python：Playwright 通过 CDP 直连 Android WebView
from playwright.sync_api import sync_playwright
 
# 1. 先用 adb forward 将 WebView 调试端口映射到 PC
# adb forward tcp:9222 localabstract:webview_devtools_remote_12345
 
with sync_playwright() as p:
    # 2. Playwright 直接通过 CDP 端口连接 WebView
    browser = p.chromium.connect_over_cdp("http://localhost:9222")
 
    # 3. 获取 WebView 中已打开的页面（context 对应 WebView 的 window）
    context = browser.contexts[0]
    page = context.pages[0] if context.pages else context.new_page()
 
    # 4. 之后操作与普通 Playwright 完全一致
    page.click(".trade-account-open")
    page.fill("input[name='phone']", "13800138000")
    page.fill("input[name='code']", "123456")
    page.click(".btn-submit")
 
    # 5. 断言
    assert page.locator(".success-tip").is_visible()
 
    browser.close()

// JavaScript：Capacitor App 的 WebView 测试（通过 Appium + WebdriverIO）
const opts = {
  platformName: 'Android',
  'appium:automationName': 'UiAutomator2',
  'appium:app': './android/app/release/app-release.apk',
  'appium:autoWebview': true,  // Capacitor App 启动即 WebView，可启用 autoWebview
  'appium:autoWebviewTimeout': 8000,
};
 
const driver = await remote({ hostname: '127.0.0.1', port: 4723, capabilities: opts });
 
// autoWebview 启用后 driver 已在 WEBVIEW Context
// 直接用 Web 定位策略即可
const loginBtn = await driver.$('#login-button');
await loginBtn.click();
 
// 测试 Capacitor 原生插件（如 Camera）需切回原生层
await driver.switchContext('NATIVE_APP');
await driver.$('~camera-permission-allow').click();
await driver.switchContext(driver.contexts[1]);

# Python：React Native App 的 WebView 测试
# RN 控件走原生定位（accessibility id），WebView 内部走 Context 切换
 
# 1. NATIVE_APP：点击 RN 渲染的"打开 WebView"按钮
driver.find_element(AppiumBy.ACCESSIBILITY_ID, "open_webview_button").click()
 
# 2. 等待 WebView Context 出现并切入
WebDriverWait(driver, 10).until(
    lambda d: any(c.startswith("WEBVIEW") for c in d.contexts)
)
webview_ctx = next(c for c in driver.contexts if c.startswith("WEBVIEW"))
driver.switch_to.context(webview_ctx)
 
# 3. 在 RN WebView 内部用 CSS 定位
driver.find_element(By.CSS_SELECTOR, "#h5-submit").click()

// Dart：Flutter App 需开启 Semantics 才能被 Appium 定位 Flutter 控件
// 在 main() 中调用
SystemChrome.setApplicationSwitcherDescription(...);
// 或运行时通过 SemanticsBinding.instance.ensureSemantics();

# Python：Flutter WebView 测试（Flutter 控件用 Flutter Finder，H5 用 Context 切换）
from appium_flutter_finder import FlutterElement, FlutterFinder
 
finder = FlutterFinder()
 
# 1. Flutter 层：用 Flutter Finder 点击"打开 WebView"按钮
# Flutter 控件不走 NATIVE_APP，走专属的 flutter 上下文
flutter_btn = FlutterElement(driver, finder.by_value_key("open_webview_key"))
flutter_btn.click()
 
# 2. H5 层：标准 Context 切换
WebDriverWait(driver, 10).until(
    lambda d: any(c.startswith("WEBVIEW") for c in d.contexts)
)
driver.switch_to.context(next(c for c in driver.contexts if c.startswith("WEBVIEW")))
 
# 3. 在 Flutter WebView 内操作 H5
driver.find_element(By.CSS_SELECTOR, ".h5-content").click()

# Python：通过 CDP 在 Appium 中订阅 WebView 网络事件
# 切到 WEBVIEW Context 后
driver.execute_cdp_cmd("Network.enable", {})
# Appium 3.x 支持 CDP 监听（需 chromedriver 149+）
# 实际生产环境推荐 Playwright + CDP 实现完整网络抓包

# Python：Playwright + CDP 完整网络抓包
from playwright.sync_api import sync_playwright
 
captured_requests = []
 
with sync_playwright() as p:
    browser = p.chromium.connect_over_cdp("http://localhost:9222")
    page = browser.contexts[0].pages[0]
 
    # 订阅请求与响应事件
    page.on("request", lambda req: captured_requests.append({
        "url": req.url,
        "method": req.method,
        "headers": req.headers,
    }))
    page.on("response", lambda res: print(f"{res.status} {res.url}"))
 
    page.click(".btn-submit")
    # captured_requests 中已包含点击触发的所有 XHR/Fetch 请求
    browser.close()